<template>
	<div class="list">
		<ul>
			<li v-for="(it,i) in list" :key="i">
				<template v-if="it.type==4">
					<img :src="getImg(it.dataDetail.image)" class="contain4"/>
				</template>
				<template v-if="it.type==7">
					<div class="contain7">
						<article>
							<img :src="getImg(it.dataDetail.image)"/>
							<p>
								<img src="https://m.youxiake.com/img/travel_icon.fa630116.png?t=fa63011634adcdad18995143d0dcf3cc" />
							</p>
						</article>
						<aside>
							<h3>{{it.dataDetail.title}}</h3>
							<p>{{it.dataDetail.numLabel}}</p>
						</aside>
					</div>
				</template>
				<template v-if="it.type==1">
					<div class="contain1">
						<article>
							<h4>{{it.dataDetail.placeLabel}}</h4>
							<img :src="getImg(it.dataDetail.image)"/>
						</article>
						<aside>
							<h3>{{it.dataDetail.title}}</h3>
							<label>{{`${it.dataDetail.productType}+${it.dataDetail.productCat}+${it.dataDetail.days}`}}</label>
							<p>
								<strong>￥{{it.dataDetail.priceLabel}}起</strong><em>{{it.dataDetail.numLabel}}</em>
							</p>
						</aside>
					</div>
				</template>
				<template v-if="it.type==5">
					<div class="contain5">
						<article>
							<img :src="getImg(it.dataDetail.image)"/>
							<p>
								<img src="https://m.youxiake.com/img/travel.d1dd2034.png?t=d1dd20340d7a52f6bc25d3de2d82f17f" />
							</p>
						</article>
						<aside>
							<h3>{{it.dataDetail.title}}</h3>
							<p>
								<label>
									<img :src="getImg(it.dataDetail.image)" />
									{{it.dataDetail.username}}
								</label>
								<span>{{it.dataDetail.numLabel}}</span>
							</p>
						</aside>
					</div>
				</template>
				<template v-if="it.type==6">
					<div class="contain6">
						<article>
							<img :src="getImg(it.dataDetail.image)"/>
							<p>攻略</p>
						</article>
						<aside>
							<h3>{{it.dataDetail.title}}</h3>
							<p>{{it.dataDetail.numLabel}}</p>
						</aside>
					</div>
				</template>
				<template v-if="it.type==3">
					<div class="contain3">
						<article>
							<img :src="getImg(it.dataDetail.image)"/>
						</article>
						<aside>
							<h3>{{it.dataDetail.title}}</h3>
							<label>
								<button>{{it.dataDetail.tagList[0]}}</button>
								<button>{{it.dataDetail.tagList[1]}}</button>
							</label>
							<p>{{it.dataDetail.subTitle}}</p>
						</aside>
					</div>
				</template>
			</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default{
		name:'TravelList',
		data(){
			return{
				list:[],
				page:1,
				
			}
		},
		created() {
			this.GetList()
			let that=this
			window.onscroll = function(){
			    //变量scrollTop是滚动条滚动时，距离顶部的距离
			    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
			    //变量windowHeight是可视区的高度
			    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
			    //变量scrollHeight是滚动条的总高度
			    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
			   //滚动条到底部的条件
			   if(scrollTop+windowHeight==scrollHeight){
					that.page++
					that.GetList()
			  }   
			}
		},
		methods:{
			GetList(){
				let that=this
				that.axios.get(`https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type=${that.type}&page=${that.page}`).then((res)=>{
					let arr=res.data.data.list
					that.list=that.list.concat(arr)
					
				}).catch((error)=>{
					console.log(error)
				})
			},
			getImg(url){
				if (url!='') {
					return url.substring(0,6)==='https'?'https://images.weserv.nl?url='+url.substring(8):'https://images.weserv.nl?url='+url.substring(7)
				}
			}
		},
		computed:{
			...mapState(['type'])
		},
		watch:{
			type(){
				this.page=1
				this.list=[]
				this.GetList()
			}
		}
	}
</script>

<style scoped>
	.list{
		width: 100%;
		background: #eeeeee;
	}
	.list ul{
		display: inline-block;
		width: 100%;
		
	}
	.list ul li{
		width: 46%;
		margin: 2% 2%;
		height: 7rem;
		border-radius: 0.5rem;
		background: #FFFFFF;
		display: inline-block;
	}
	/*  */
	.list ul li .contain4{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem;
	}
	/*  */
	.list ul li .contain7 article {
		width: 100%;
		height: 5.5rem;
	}
	.list ul li .contain7 article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem 0.3rem 0 0;
	}
	.list ul li .contain7 article p{
		display: inline-block;
		position: relative;
		bottom: 0.3rem;
		left: 3rem;
		width: 1.3rem;
		height: 0.5rem;
	}
	.list ul li .contain7 article p img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: inherit;
	}
	.list ul li .contain7 aside {
		width: 100%;
		height: 1.5rem;
		text-indent: 1em;
	}
	.list ul li .contain7 aside h3{
		line-height: 0.8rem;
		font-size: 0.4rem;
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
	.list ul li .contain7 aside p{
		font-size: 0.3rem;
	}
	/*  */
	.list ul li .contain1 article {
		width: 100%;
		height: 4rem;
	}
	.list ul li .contain1 article h4{
		position: relative;
		display: inline-block;
		background:rgba(0,0,0,0.6);
		z-index: 10;
		color: white;
		padding: 0.1rem 0.3rem;
		border-radius: 0.2rem 0 0.2rem 0;
	}
	.list ul li .contain1 article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem 0.3rem 0 0;
		position: relative;
		bottom: 0.5rem;
	}
	.list ul li .contain1 article p{
		display: inline-block;
		width: 1.3rem;
		height: 0.5rem;
	}
	.list ul li .contain1 aside {
		width: 100%;
		height: 3rem;
	}
	.list ul li .contain1 aside h3{
		line-height: 0.6rem;
		font-size: 0.4rem;
		height: 1.2rem;
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
	.list ul li .contain1 aside label{
		font-size: 0.3rem;
		color: #808080;
		display: inline-block;
		line-height: 0.8rem;
		padding-bottom: 0.2rem;
	}
	.list ul li .contain1 aside p{
		font-size: 0.45rem;
		line-height: 0.9rem;
		color: orange;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}
	.list ul li .contain1 aside p em{
		color: lightslategrey;
		font-size: 0.2rem;
		font-weight: normal;
	}
	/*  */
	.list ul li .contain5 article{
		width: 100%;
		height: 5rem;
	}
	.list ul li .contain5 article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem 0.3rem 0 0;
	}
	.list ul li .contain5 article p{
		display: inline-block;
		position: relative;
		bottom: 0.3rem;
		left: 0.2rem;
		width: 1.8rem;
		height: 0.6rem;
	}
	.list ul li .contain5 article p img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: inherit;
	}
	.list ul li .contain5 aside{
		height: 2rem;
	}
	.list ul li .contain5 aside h3{
		width: 85%;
		line-height: 1rem;
		font-size: 0.4rem;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.list ul li .contain5 aside p{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list ul li .contain5 aside p label{
		width: 60%;
		font-size: 0.1rem;
		display: flex;
		align-items: center;
	}
	.list ul li .contain5 aside p label img{
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		padding-right: 0.2rem;
	}
	.list ul li .contain5 aside p span{
		font-size: 0.3rem;
		padding-right: 0.2rem;
	}
	/*  */
	.list ul li .contain6 article{
		width: 100%;
		height: 5rem;
	}
	.list ul li .contain6 article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem 0.3rem 0 0;
	}
	.list ul li .contain6 article p{
		display: inline-block;
		position: relative;
		bottom: 0.3rem;
		left: 0.2rem;
		width: 0.9rem;
		height: 0.5rem;
		background: #FED101;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.35rem;
	}
	.list ul li .contain6 aside{
		width: 90%;
		height: 2rem;
	}
	.list ul li .contain6 aside h3{
		line-height: 1rem;
		font-size: 0.4rem;
		height: 1.2rem;
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.list ul li .contain6 aside p{
		width: 100%;
		
	}
	/*  */
	.list ul li .contain3 article{
		width: 100%;
		height: 4.5rem;
	}
	.list ul li .contain3 article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem 0.3rem 0 0;
	}
	.list ul li .contain3 article p{
		display: inline-block;
		position: relative;
		bottom: 0.3rem;
		left: 0.2rem;
		width: 0.9rem;
		height: 0.5rem;
		background: #FED101;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.35rem;
	}
	.list ul li .contain3 aside{
		width: 100%;
		height: 2.5rem;
		background-image: url(../../../../public/bg/tra_bg.png);
		background-size: 100% 100%;
		text-align: center;
		color: white;
	}
	.list ul li .contain3 aside h3{
		line-height: 1rem;
		font-size: 0.4rem;
		font-weight: bold;

	}
	.list ul li .contain3 aside label{
		display: flex;
		justify-content: space-evenly;
	}
	.list ul li .contain3 aside label button{
		border: none;
		border-radius: 0.2rem;
	}
	.list ul li .contain3 aside p{
		width: 100%;
		padding-top: 0.2rem;
	}
	/*  */
	
</style>
